import QtQuick 2.0
//import Qt 4.7
Rectangle{
    id:okeyboard
    width: max_w
    height: max_h/2
    property  int window_x: 0
    property  int window_y: 0
    property string keys: ""
    property int columns:  1
    property int max_h : 100
    property int max_w : 100
    property Item rp: okeyboard
    property int rows: 1
    signal hideKeyboard()
    signal letterClicked(string letter)
    color:"#999292"
    border.color: "#c6b1b1"
    anchors.horizontalCenter: rp.horizontalCenter
    x:(-window_x)
    y:(-window_y)+max_h-height
    anchors.margins: 30
    Grid {
        id: keyboard
        anchors.fill: parent

        rows: okeyboard.rows
        columns: okeyboard.columns
        spacing: 0
        Repeater {
            model: keys.length
            Button {
                width: okeyboard.width/(columns+anchors.margins*2); height: okeyboard.height/(rows+anchors.margins*2)
                label: {
                    if ( keys.charAt(index) ==']' ){
                        parent.focus=true
                        return "Enter"
                    }
                    else if ( keys.charAt(index) =='>' ){
                        parent.focus=true
                        return "Hiden"
                    }else if ( keys.charAt(index) ==' ' ){
                        opacity=0
                        enabled=false
                        return " "
                        //visible=false
                    }
                    else
                        keys.charAt( index  );
                }
                onClicked: {

                    if ( keys.charAt(index) ==']'|| keys.charAt(index) =='>'){
                        parent.forceActiveFocus();
                        //     parent.openSoftwareInputPanel();
                    }

                    letterClicked(label)

                }
            }


        }
        //    }

    }
    states: State {
        name: "Hid"
        PropertyChanges { target: okeyboard; opacity:0.5; y:max_h} // Make details visible

    }

    transitions: Transition {
        // Make the state changes smooth
        ParallelAnimation {
            ColorAnimation { property: "color"; duration: 500 }
            NumberAnimation { duration: 1000; properties: "opacity" }
            NumberAnimation { duration: 500; properties: "y" }
        }
    }
}
